<template>
  <div>
    <a-form-model ref="law_departForm" :rules="rules" :model="departForm">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="机关编号" prop="id" has-feedback>
        <a-input :disabled="!departForm.isAdd"  v-model="departForm.id" allow-clear placeholder="请输入机关编号"/>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="机关名称" prop="name" has-feedback>
        <a-input v-model="departForm.name" allow-clear :maxLength="125" placeholder="机关名称"/>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="区域编号" prop="adid" has-feedback>
        <a-input v-model="departForm.adid" allow-clear :maxLength="125" placeholder="区域编号"/>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单位类型" prop="type" has-feedback>
        <a-select allow-clear placeholder="请选择单位类型" @change="selectChange" v-model="departForm.type">
          <a-select-option v-for="item in Tp_unitTypeList" :key="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item>
        <div class="text-center">
          <a-button class="m-r-8" icon="reload" @click="resetForm"> 重置 </a-button>
          <a-button type="primary" @click="onSubmit" icon="save" :loading="loading"> 保存 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { Tp_unitTypeList } from '@/enumeration/Tp_unit'
import { saveOrUpdataLawPubunit } from '@/api/law/law_pubunit'
import { nanoid } from 'nanoid'
export default {
    props: {
      departForm: {
        type: Object,
        default () {
          return {
            id: '',
            name: '',
            adid: '',
            type: undefined,
            isAdd: true
          }
        }
      },
    },
    data() {
      return {
        labelCol: { span: 6 }, // label宽
        wrapperCol: { span: 18 }, // 组件宽
        loading: false, //按钮显示
        Tp_unitTypeList: Tp_unitTypeList,
        Tp_unit: Tp_unitTypeList,
        /**
        * 添加表单验证规则
        */
        rules: {
          name: [
            { required: true, message: '请输入机关名称', trigger: 'blur' },
            { max: 50, message: '长度不能超过50', trigger: 'blur' },
          ],
          adid:  [
            { required: true, message: '请输入区域编号', trigger: 'blur' },
            { max: 50, message: '长度不能超过50', trigger: 'blur' },
          ],
          type: [{ required: true, message: '请选择单位类型', trigger: 'change' }]
        }
      }
    },
    created() {
    },
    methods: {
      selectChange (e) {
        this.departForm.type = e
        console.log(e)
      },
      /**
       * 关闭页面
       */
      onClose () {
        this.$emit('close')
      },

      /**
       * 重置表单
       */
      resetForm () {
          console.log('form', this.$refs.law_departForm)
          this.$refs.law_departForm.resetFields()
      },
      getNanoId() {
        return nanoid();
      },

      /**
       * 提交表单
       */
      onSubmit () {
        let _this = this;
        this.$refs.law_departForm.validate((valid) => {
          _this.loading = true
          if (valid) {
            // delete _this.law_departForm.primaryKey
            console.log('submit!', _this.departForm)
            const savem = _this.$message.loading('数据正在保存中...', 0)
            if (_this.departForm.id == '' || _this.departForm.id == null || _this.departForm.id == undefined) {
              _this.departForm.id = _this.getNanoId()
            }
            //默认字段deleted
            _this.departForm.deleted = 0
            saveOrUpdataLawPubunit(_this.departForm).then((res) => {
              if (res.code !== 0) {
                setTimeout(savem, 0)
                _this.$message.error('法律机关保存失败')
              } else {
                setTimeout(savem, 0)
                _this.$message.success('保存成功')
                _this.$emit('reloadList')
                _this.$emit('close')
              }
              _this.loading = false
            })
          } else {
            _this.loading = false
            // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
            // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
            setTimeout(() => {
              const isError = document.getElementsByClassName('has-error')
              const input = isError[0].querySelector('input')
              //console.log(input)
              if (input !== null && input !== 'undefind' && input !== '') {
                isError[0].querySelector('input').focus()
                  ? isError[0].querySelector('input').focus()
                  : isError[0].querySelector('input').click()
              } else {
                isError[0].querySelector('textarea').focus()
              }
            }, 10)
            return false
          }
        })
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>
  